// webpack 是node写出来的 node写法
let path = require('path')
// console.log(path.resolve(__dirname, 'dist'))
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true,
    contentBase: './build',
    compress: true
  },
  mode: 'development', // 模式 默认两种 production development
  entry: './src/index.js', // 入口
  output: {
    filename: 'bundle.[hash:8].js', // 打包后的文件名
    path: path.resolve(__dirname, 'build'), // 路径必须是一个绝对路径, __dirname当前目录
  },
  plugins: [ // 数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      // 模板
      template: './src/index.html',
      // 打包后文件
      filename: 'index.html',
      // 压缩文件
      minify: {
        // 去掉双引号
        removeAttributeQuotes: true,
        // 开启一行
        collapseWhitespace: true
      },
      // 打包出来的文件加hash戳
      hash: true
    })
  ],
  module: { // 模块
    rules: [ // 规则 css-loader 接续@import这种语法的
      // style-loader 他是把css 插入的head的标签中
      // loader的特点 希望单一
      // loader的用法 字符串只用一个loader
      // 多个loader需要[]
      // loader的顺序 默认是从右到左 从下到上
      // loader还可以写成 对象方式
      { 
        // 可以处理less文件
        test: /\.css$/, 
        use:[
          {
            loader: 'style-loader',
            options: {
              // 把这些放在最顶
              insertAt: 'top'
            }
          },
          'css-loader'
        ]
      },
      { 
        // 可以处理less文件
        // sass node-sass  sass-loader
        // stylus stylus-loader
        test: /\.less$/, 
        use:[
          {
            loader: 'style-loader',
            options: {
              // 把这些放在最顶
              insertAt: 'top'
            }
          },
          'css-loader',
          'less-loader'
        ]
      }
    ]

  }
}